import { Component, Inject, OnInit } from '@angular/core';
import { FormGroup, FormControl, FormBuilder, Validators } from '@angular/forms';
import { first } from 'rxjs/operators';
import { Router } from '@angular/router';
import { AppService } from '../../services/app.service';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';

import { RouterModule } from '@angular/router';



@Component({
  selector: 'app-login',
  standalone: true,
  imports: [FormsModule, CommonModule, ReactiveFormsModule, RouterModule],
  templateUrl: './login.component.html',
  styleUrl: './login.component.scss'
})
export class LoginComponent implements OnInit {
  public loginForm: FormGroup;
  public registerForm: FormGroup;

  public iconPassword = new FormControl('');

  constructor(private fb: FormBuilder, private appService: AppService, private route: Router) {
    this.loginForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
    });
    this.registerForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
      confirmPassword: ['', Validators.required],
      phone: ['', Validators.required],
    });
  }

  async ngOnInit() {
    const wrapper = document.querySelector<HTMLElement>('.wrapper');
    const loginLink = document.querySelector<HTMLElement>('.login-link');
    const registerLink = document.querySelector<HTMLElement>('.register-link');

    if (wrapper && loginLink && registerLink) {
      registerLink.addEventListener('click', () => {
        wrapper.classList.add('active');
      });
      loginLink.addEventListener('click', () => {
        wrapper.classList.remove('active');
      });
    } else {
      console.error("One or more elements not found");
    }
  }

  async loginByAuth(loginForm: any) {
    if (loginForm.valid) {
      this.appService.loginByAuth(loginForm.value.username, loginForm.value.password)
        .pipe(first())
        .subscribe(data => {
          console.log(data);
          if (data.message == 'Login Admin Success') {
            this.route.navigate(['/admin-page']);
          }
          if (data.message == 'Login User Success') {
            this.route.navigate(['/']);
          }
          if (data.message == 'Login Falied') {
            alert('Username or Password is incorrect');
          }
        }, error => {
          alert("Username or Password is incorrect");
        })
    }
    if (!loginForm.valid) {
      alert("กรุณากรอกรหัส");
    }
  }
  async registerByAuth(registerForm: any) {
    if (registerForm.valid) {
      if (registerForm.value.password == registerForm.value.confirmPassword) {
        await this.appService.registerByAuth(
          registerForm.value.username,
          registerForm.value.password,
          registerForm.value.phone).pipe(first()).subscribe(data => {
            window.location.reload();
          },
            error => { });
      }else{
        alert('รหัสผ่านไม่ตรงกัน');
      }
    }
  }

  public showIcon = false;

  toggleIcon(event: Event) {
    const inputValue = (event.target as HTMLInputElement).value;
    this.showIcon = inputValue.length > 0;
  }
}
